<template>
  <Modal v-if="visiable" width="700px" height="550px">
    <div class="share h-100 flex flex-col">
      <div class="core-head px-12 py-4">
        <div>共享中心</div>
        <div class="icon-button" @click="close">
          <img :src="closePng" width="16" />
        </div>
      </div>
      <div class="px-12 py-8 flex justify-between">
        <div>分享列表 </div>
        <div>
          <div class="icon-button" @click="refresh">
            <img :src="refreshPng" width="16" />
          </div>
        </div>
      </div>
      <div class="px-12 container flex-1">
        <ul v-if="list.length > 0">
          <li v-for="(item, key) in list" :key="key" class="flex flex-col gr-4">
            <div class="flex justify-between align-center">
              <div class="flex align-center">
                <div class="title mr-4">{{ item.title }}</div>
                <div class="tag">{{ item.category }}</div>
              </div>
              <div class="tag core-button" @click="add(item)">添加</div>
            </div>
            <div class="desc">
              {{ item.desc }}
            </div>
            <div class="footer flex">
              <div>{{ item.username }}</div>
              <div>{{ item.date }}</div>
            </div>
          </li>
        </ul>
        <div v-else class="text-center"> 没有发现内容,切换服务器试试吧 </div>
      </div>
    </div>
  </Modal>
</template>

<script setup lang="ts">
  import Modal from '@/views/components/modal/Modal.vue';
  import closePng from '@/assets/images/close.png';
  import { onMounted, ref, watch } from 'vue';
  import refreshPng from '@/assets/images/refresh.png';
  import { programData } from '@/store/program/utils';
  import { ShareData } from '@/store/program/types';
  import { message } from '@/views/components/message/bus';
  import { getData, list } from './data';

  const emit = defineEmits(['update:visiable']);
  const data = programData();

  const add = (item: ShareData) => {
    const index = data.programList.findIndex((e) => e.id === item.id);
    if (index > -1) {
      message('已存在');
    } else {
      data.programList.push(item);
      message('成功添加');
    }
  };
  onMounted(() => {
    getData();
  });

  const props = defineProps<{
    visiable: boolean;
  }>();
  const refresh = async () => {
    try {
      await getData();
    } catch (error) {
      message('服务器遇到问题');
    }
  };
  const close = () => {
    emit('update:visiable', !props.visiable);
  };

  watch(
    data,
    () => {
      getData();
    },
    {
      deep: true,
    }
  );
</script>

<style lang="scss" scoped>
  @import './share';
</style>
